<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        background-color: #efefef;
    }

    .back {
        width: 1000px;
        height: 390px;
        margin: 200px auto;
    }

    ul {
        width: auto;
        height: 390px;
        list-style: none;
        display: flex;
    }

    ul>li {
        width: 36px;
        height: 390px;
        position: relative;
        transition: all 0.5s ease;
        overflow: hidden;
    }
    ul>li>div{
        display: inline-block;
    }

    .lis {
        width: auto;
    }

    .lis {
        width: auto;
    }

    ul>li>div:nth-child(1) {
        width: 310px;
        height: 36px;
        background-color: #ee6475;
        transform: rotate(270deg);
        line-height: 36px;
        color: rgb(255, 255, 255);
        transition: all 1s ease;
        padding-left: 20px;
        position: absolute;
        left: -147px;
        top: 180px;
    }

    ul>li>div:nth-child(2) {
        width: 499px;
        height: 264px;
        margin: 33px 0;
        padding: 33px 33px 33px 66px;
        background-color: #fff;
        transition: all 1s ease;
    }

    ul>li>div:nth-child(2):hover {
        background-color: #f9e9dc;
        border: 1px dashed black;
    }

    ul>li>div:nth-child(2)>p {
        font-size: 12px;
        margin-bottom: 16px;
    }

    ul>li>div:nth-child(1):hover {
        background-color: black;
    }

    ul>li>div:nth-child(3) {
        width: 108px;
        height: 16px;
        background-color: #ee6475;
        color: rgb(255, 255, 255);
        transition: all 1s ease;
        position: absolute;
        left: 67px;
        bottom: 92px;
        border-radius: 10px;
        text-align: center;
        padding: 10px 0;
        font-size: 12px;
    }

    ul>li>div:nth-child(3):hover {
        background-color: black;
    }

    ul>li>div:nth-child(4) {
        float: right;
        width: 288px;
        height: 390px;
    }
    ul>li>div:nth-child(4)>img{
        width: 280px;
        height: 381px;
        border: 4px solid white;
    }
</style>

<body>
    <div class="back">
        <ul>
            <li class="lis">
                <div class="asd">夏日阳光带你欣赏</div>
                <div>
                    <p>
                        躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
                    </p>
                    <p>
                        躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
                    </p>
                    <p>
                        躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下
                    </p>
                </div>
                <div>点击进入</div>
                <div><img src="./img/t1.png" alt=""></div>
            </li>
            <li class="">
                <div class="asd">夏日阳光带你欣赏</div>
                <div>
                    <p>
                        躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
                    </p>
                    <p>
                        躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
                    </p>
                    <p>
                        躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下
                    </p>
                </div>
                <div>点击进入</div>
                <div><img src="./img/t2.png" alt=""></div>
            </li>
            <li class="">
                <div class="asd">夏日阳光带你欣赏</div>
                <div>
                    <p>
                        躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
                    </p>
                    <p>
                        躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
                    </p>
                    <p>
                        躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下
                    </p>
                </div>
                <div>点击进入</div>
                <div><img src="./img/t3.png" alt=""></div>
            </li>
            <li class="">
                <div class="asd">夏日阳光带你欣赏</div>
                <div>
                    <p>
                        躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
                    </p>
                    <p>
                        躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
                    </p>
                    <p>
                        躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下
                    </p>
                </div>
                <div>点击进入</div>
                <div><img src="./img/t1.png" alt=""></div>
            </li>
        </ul>
    </div>
    <!-- 效果 -->
    <script>
        var asd = document.querySelectorAll(".asd")
        var list = document.querySelectorAll("li")
        for (let i = 0; i < asd.length; i++) {
            asd[i].onclick = function () {
                for (let j = 0; j < list.length; j++) {
                    list[j].classList.remove("lis")
                }
                if (this.parentNode.classList.contains("lis") == false) {
                    this.parentNode.classList.add("lis")
                }

            }
        }
    </script>
</body>

</html>